<script lang="ts" setup>
import { getUserList, create, update, del } from "@/api/system-api/user"
import { useTableDataMember, useDataDialogMember, useTreeMember } from "@/hooks/commonData/useCommonData"
import { getOrgTree } from "@/api/system-api/org"
import { Userinfo } from "@/api/system-api/user/types/user"
import { UserQuery } from "@/api//system-api/user/types/userQuery"
import { onMounted } from "vue"
import { Search, Plus, Delete, Edit, Pointer } from "@element-plus/icons-vue"
import DictionaryTag from "@/components/DictionaryDisplay/dictionaryTag.vue"
import DictionarySelect from "@/components/DictionaryDisplay/dictionarySelect.vue"

const listQuery = { page: 1, limit: 10 } as UserQuery
const entity = {} as Userinfo
const { queryRef, tableRef, tableDataRef, tableLoadingRef, totalRef, getList, handleSizeChange, handleCurrentChange } =
  useTableDataMember(listQuery, getUserList)
const {
  formRef,
  entityRef,
  dialogStatus,
  currentRef,
  submit,
  handleCreate,
  handleDelete,
  handleUpdate,
  handleDetail,
  getCurrent
} = useDataDialogMember(entity, create, update, del, [["id", "userId"]], getList)
// const headerRowClassName = ({ row, rowIndex }: { row: Userinfo; rowIndex: number }): string => {
//   console.log(row, rowIndex)
//   if (rowIndex === 0) {
//     return "background-color:var(--el-color-success-light-9) /deep/"
//   }
//   return ""
// }
const { optionsRef, getTree } = useTreeMember(getOrgTree)
const optionProp = {
  value: "id",
  label: "orgName",
  children: "children"
}
const rules = {
  userName: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
  userAccount: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
  userPassWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "最少输入6个字符", trigger: "blur" }
  ]
}
onMounted(async () => {
  await getList()
  await getTree()
})
</script>
<template>
  <div class="app-container">
    <el-row style="margin-bottom: 5px" :gutter="20">
      <el-col :span="4">
        <el-input v-model="queryRef.name" placeholder="请输入用户姓名" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryRef.userAccount" placeholder="请输入用户账号" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryRef.userPhone" placeholder="请输入用户身份证号" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryRef.orgName" placeholder="请输入用户组织机构名称" />
      </el-col>
      <el-col :span="6" style="float: right">
        <el-button type="primary" :icon="Search" @click="getList">搜索</el-button>
        <el-button type="primary" :icon="Plus" @click="handleCreate">新增</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" header="用户管理">
      <el-table
        ref="tableRef"
        v-loading="tableLoadingRef"
        :data="tableDataRef"
        :border="true"
        fit
        highlight-current-row
        stripe
        style="width: 100%"
        element-loading-text="给我一点时间"
      >
        <el-table-column label="用户姓名" prop="userName" show-overflow-tooltip />
        <el-table-column label="账号" prop="userAccount" show-overflow-tooltip />
        <el-table-column label="性别" width="80">
          <template #default="scope">
            <DictionaryTag :parent-id="19" :current-value="scope.row.userSex" />
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="userPhone" show-overflow-tooltip />
        <el-table-column label="身份证号" prop="idNumber" show-overflow-tooltip />
        <el-table-column label="所属单位" prop="orgName" show-overflow-tooltip />
        <el-table-column label="用户权限">
          <template #default="scope">
            <DictionaryTag :parent-id="15" :current-value="scope.row.userRole" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="info" :icon="Pointer" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 15px">
        <el-pagination
          :current-page="queryRef.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryRef.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRef"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogStatus" :modal-append-to-body="false" :close-on-click-modal="false" :title="getCurrent()">
      <el-form ref="formRef" :model="entityRef" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="userName">
              <el-input v-model="entityRef.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录账号" prop="userAccount">
              <el-input v-model="entityRef.userAccount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="UserPassWord">
              <el-input v-model="entityRef.userPassWord" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <DictionarySelect ref="test3" :parent-id="19" v-model="entityRef.userSex" style="width: 100%" clearable />
              <!-- <el-select v-model="entityRef.userSex" style="width: 100%">
                <el-option value="0" label="女" />
                <el-option value="1" label="男" />
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="entityRef.userPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户权限">
              <DictionarySelect :parent-id="15" v-model="entityRef.userRole" style="width: 100%" clearable />
              <!-- <el-select v-model="entityRef.userRole" style="width: 100%">
                <el-option value="0" label="普通用户" />
                <el-option value="1" label="管理员" />
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="entityRef.idNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户单位">
              <el-tree-select
                :data="optionsRef"
                v-model="entityRef.orgIdList"
                placeholder="请选择机构"
                :props="optionProp"
                :check-strictly="true"
                multiple
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; display: flex; justify-content: center">
          <el-button v-if="currentRef != 3" type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="dialogStatus = false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped></style>
